<template>
    <div id="page-my-order-detail">
        <div class="page-title">
            位置：我的订单 / 订单详情
        </div>
        <div class="page-subtitle">
            <span class="left">
                <i class="icon icon-order"></i><span>订单详情</span>
            </span>
            <!-- <router-link :to="{name:'myInvoice'}" class="right" v-if="subscriberInfo.appOrder&&subscriberInfo.appOrder.invoiceStatus==1">发票已开</router-link> -->
            <router-link :to="{name:'personal-invoice-detail', query: { id: subscriberInfo.appOrder.invoiceId}}" class="right" v-if="subscriberInfo.appOrder&&subscriberInfo.appOrder.invoiceStatus==1">发票已开</router-link>
        </div>
        <div class="order-info" v-if="subscriberInfo.appOrder">
            <span class="order-num">订单号：{{subscriberInfo.appOrder.orderId}}</span><span class="date">{{subscriberInfo.appOrder.orderCreateTime}}</span>
        </div>
        <div class="subscribe-detail">
            <div class="order-detail">
                {{subscriberInfo.appOrder.orderDescribe}}
            </div>
            <div class="pay-money">
                {{(subscriberInfo.appOrder.orderPayStatus==1?'实付：￥':'待支付：￥')+(subscriberInfo.appOrder.cashFee/100).toFixed(2)}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                orederId:'',
                subscriberInfo:{
                    appOrder:{}
                }
            }
        },
        mounted() {
            this.orederId = this.$route.query.id;
            this.$request.orderDetail({
                orderId:this.orederId
            }).then(res=>{
                console.log(res);
                if(res.status==200){
                    let resData = res.data;
                    this.subscriberInfo = resData;
                    console.log("-----------", this.subscriberInfo);
                }else {
                    this.requestError(res.status,res.message);
                }

            },err=>{
                console.log(err);
                this.requestFail(err);
            })
        }
    }
</script>

<style lang="less" scoped>
    @moudle-bg-color:#ffffff;
    @line:1px solid #E9E9E9;
    .page-subtitle{
        line-height: 50px;
        padding: 0 20px;
        background-color: @moudle-bg-color;
        .clearfix;
        margin-top: 7px;
        i{
            .size(20px,24px);
            .bg('@{img-base-url}orderDetail_icon-order.png');
            &+span{
                vertical-align: middle;
                .color(@main-color);
                margin-left: 11px;
                .fz(18px);
            }
        }
        .right{
            .color(#0391FF);
            text-decoration: underline;
            .fz(16px);
        }
    }
    .order-info{
        .fz(16px);
        line-height: 55px;
        padding-left: 20px;
        background-color: @moudle-bg-color;
        border-top: @line;
        .order-num{
            .color(#252627);
        }
        .date{
            .color(#7c7c7c);
            margin-left: 20px;
        }
    }
    .subscribe-detail{
        border-top: @line;
        background-color: #ffffff;

        .order-detail{
            line-height: 46px;
            .fz(16px);
            padding: 5px 20px;
        }
        hr{
            border-color: #E9E9E9;
        }
        .pay-money{
            .color(#090909);
            .fz(18px);
            text-align: right;
            padding: 45px 20px;
        }
    }
</style>